<template>
  <div class="logs-container">
    <h1>日志</h1>
    <div class="content">
      <h2>系统日志记录</h2>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.timestamp"
          :type="activity.type"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const activities = ref([
  {
    content: '系统启动',
    timestamp: '2025-05-21 10:00:00',
    type: 'primary'
  },
  {
    content: '用户登录',
    timestamp: '2025-05-21 10:05:00',
    type: 'success'
  },
  {
    content: '数据更新',
    timestamp: '2025-05-21 10:10:00',
    type: 'info'
  },
  {
    content: '系统维护',
    timestamp: '2025-05-21 10:15:00',
    type: 'warning'
  }
])
</script>

<style scoped>
.logs-container {
  padding: 20px;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #303133;
}

.content {
  background-color: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

h2 {
  font-size: 20px;
  color: #606266;
  margin-bottom: 20px;
}
</style> 